<template>
  <div>
    <div v-show="isManage" class="message">
      <div class="common-form-box">
        <div class="tools-container" style="margin-top: 20px; margin-left: 20px">
          <div class="buttons">
            <el-button type="primary" @click="addShow">新增消息推送</el-button>
            <!-- <el-button @click="isManage = false">查看历史</el-button> -->
          </div>
        </div>
        <!-- 主体表格内容 -->
        <el-table :data="list" border center style="width: 95%; margin:0 auto">
          <el-table-column width="120" type="index" label="序号" align="center" />
          <el-table-column align="center" label="姓名" prop="userName" />
          <el-table-column align="center" label="手机号" prop="phone" />
          <el-table-column align="center" label="职位信息" prop="job" />
          <el-table-column align="center" label="关联场景" prop="sceneName" />
          <el-table-column align="center" label="推送等级" prop="level" />
          <el-table-column align="center" label="备注信息" prop="tips" />
          <el-table-column align="center" label="推送状态" prop="send">
            <template slot-scope="scope">
              <span>{{ scope.row.send ? '开启' : '关闭' }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="300">
            <template slot-scope="scope">
              <el-button @click="changeSendStatus(scope.row)">{{ scope.row.send ? '暂停推送' : '开启推送' }}</el-button>
              <el-button @click="editShow(scope.row)">编辑</el-button>
              <el-button @click="delData(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页器 -->
      <el-pagination :current-page.sync="page" :total="total" class="pagination-container" background layout="total, prev, pager, next, jumper" @current-change="handleCurrentChange"/>

      <!-- 消息推送 -->
      <el-dialog :title="isCreate ? '新增消息推送' : '修改消息推送'" :visible.sync="formShow" width="805px" top="18vh">
        <el-form ref="commonForm" :model="commonForm" :rules="rules" label-width="120px">
          <el-form-item label="姓名" prop="userName">
            <el-input v-model="commonForm.userName" placeholder="请输入推送人姓名" />
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="commonForm.phone" placeholder="请输入推送号码" class="phone-code-inpuit" />
            <el-button :disabled="clickCode" class="code-button" @click="getPhoneCode(commonForm.phone)">{{ codeTips }}</el-button>
          </el-form-item>
          <el-form-item label="验证码" prop="random">
            <el-input v-model="commonForm.random" placeholder="请输入手机验证码" />
          </el-form-item>
          <el-form-item label="场景选择" prop="sceneId">
            <el-select v-model="commonForm.sceneId" placeholder="请选择场景">
              <el-option v-for="item in sceneList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="职位" prop="job">
            <el-input v-model="commonForm.job" placeholder="请输入职位信息" />
          </el-form-item>
          <el-form-item label="报警等级选择" prop="level">
            <el-select v-model="commonForm.level" placeholder="请选择预警等级">
              <el-option v-for="item in levelList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="备注信息">
            <el-input v-model="commonForm.tips" placeholder="请输入备注信息" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="formShow = false">取消</el-button>
          <el-button v-if="isCreate" type="primary" @click="addData('commonForm')">确认新增</el-button>
          <el-button v-else type="primary" @click="editData('commonForm')">确认修改</el-button>
        </div>
      </el-dialog>
    </div>
    <div v-show="!isManage" class="message">
      <div class="common-form-box">
        <!-- 头部显示与搜索 -->
        <div class="common-form-header">
          <h1>推送历史数据<span>{{ totalData }}</span></h1>
          <div class="right-menu">
            <div class="filterButton" @click="isManage = true">
              <span>返回设置</span>
            </div>
          </div>
        </div>
        <!-- 主体表格内容 -->
        <el-table :data="listData" style="width: 100%">
          <el-table-column width="120" type="index" label="序号" align="center" />
          <el-table-column align="center" label="姓名" prop="userName" />
          <el-table-column align="center" label="手机号" prop="phone" />
          <el-table-column align="center" label="推送时间" prop="createTime" />
          <el-table-column align="center" label="推送内容" prop="job" width="500" />
        </el-table>
      </div>
      <!-- 分页器 -->
      <div class="fenye">
        <el-pagination :current-page.sync="pageData" :page-size="sizeData" layout="total, prev, pager, next" :total="totalData" @current-change="handleCurrentChangeData" />
      </div>
    </div>
  </div>
</template>

<script>
import { get, add, edit, del, getCode, getHistory, changeStatus } from '@/api/message'
import { getScene } from '@/api/warning'
import { validateMessage } from '@/utils/validate'
export default {
  name: 'Message',
  data() {
    return {
      isManage: true,
      list: [],
      page: 1,
      size: 10,
      total: 0,
      listData: [],
      pageData: 1,
      sizeData: 10,
      totalData: 0,
      formShow: false,
      isCreate: true,
      commonForm: {
        userName: '',
        phone: '',
        random: '',
        level: '',
        job: '',
        tips: '',
        sceneId: ''
      },
      codeTips: '获取验证码',
      levelList: [{
        label: '一级预警',
        value: 1
      }, {
        label: '二级预警',
        value: 2
      }, {
        label: '三级预警',
        value: 3
      }],
      sceneList: []
    }
  },
  mounted() {
    this.getList()
    this.getSceneList()
    // this.getListData()
  },
  computed: {
    rules() {
      // 返回表单验证
      return validateMessage
    },
    // 是否能点击获取验证码
    clickCode() {
      return this.codeTips !== '获取验证码'
    }
  },
  methods: {
    // 获取列表
    getList() {
      get({
        page: this.page,
        size: this.size
      }).then(res => {
        this.list = res.data.records
        this.total = res.data.total
      })
    },
    // 分页切换
    handleCurrentChange(val) {
      this.page = val
      this.getList()
    },
    // 获取推送历史列表
    getListData() {
      getHistory({
        page: this.pageData,
        size: this.sizeData
      }).then(res => {
        this.listData = res.data.records
        this.totalData = res.data.total
      })
    },
    // 分页切换
    handleCurrentChangeData(val) {
      this.pageData = val
      this.getListData()
    },
    // 获取场景
    getSceneList() {
      getScene().then(res => {
        if (res.data.records.length) {
          this.sceneList = res.data.records
        } else {
          this.sceneList = []
        }
      })
    },
    // 新增初始化
    addShow() {
      this.formShow = true
      this.isCreate = true
      setTimeout(() => {
        this.$refs['commonForm'].resetFields()
      }, 100)
    },
    // 新增
    addData(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          add(this.commonForm).then(res => {
            this.$message({
              message: res.data,
              type: 'success',
              duration: 800
            })
            this.getList()
            this.$refs[formName].resetFields()
            this.commonForm.tips = ''
            this.formShow = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 修改初始化
    editShow(form) {
      this.formShow = true
      this.isCreate = false
      setTimeout(() => {
        this.$refs['commonForm'].resetFields()
        this.commonForm.tips = ''
        this.commonForm = {
          ...form
        }
      }, 100)
    },
    // 修改提交
    editData(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          edit(this.commonForm).then(res => {
            this.$message({
              message: res.data,
              type: 'success',
              duration: 800
            })
            this.getList()
            this.$refs[formName].resetFields()
            this.commonForm.tips = ''
            this.formShow = false
          })
        }
      })
    },
    // 修改推送状态
    changeSendStatus(row) {
      const { id, send } = row
      changeStatus({
        id,
        send: send ? 0 : 1
      }).then(res => {
        this.$message({
          message: res.data,
          type: 'success',
          duration: 800
        })
        this.getList()
      })
    },
    // 删除功能
    delData(id) {
      this.$confirm('此操作将删除该推送?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        del(id).then(res => {
          this.$message({
            message: res.data,
            type: 'success',
            duration: 800
          })
          this.delSelShow = false
          this.getList()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 获取手机验证码
    getPhoneCode(code) {
      if (code) {
        if (code.length === 11) {
          getCode({ phone: this.commonForm.phone })
          this.codeTips = '45s'
          let time = 44
          let djs = setInterval(() => {
            this.codeTips = time-- + 's'
            if (time === -1) {
              clearInterval(djs)
              this.codeTips = '获取验证码'
              time = 44
            }
          }, 1000)
        } else {
          this.$message({
            message: '请输入正确的手机号码',
            type: 'warning',
            duration: 800
          })
        }
      } else {
        this.$message({
          message: '请输入手机号码',
          type: 'warning',
          duration: 800
        })
      }
    }
  }
}

</script>

<style lang="scss" scoped>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 100%;
  }
  .message {
    width: 100%;
  }
  .phone-code-inpuit {
    width: 60%;
  }
  .code-button {
    background: transparent;
    border: none;
    color: #0ad239;
    &.is-disabled:hover {
      color: #0ad239;
      background-image: none;
      background-color: transparent;
      border-color: transparent;
    }
  }

</style>
